<template>
	<view>
		<navigationbar :title="title" />
		<view class="container">
			<u-sticky :offsetTop="offsetTop" bgColor="white"><view class="top"><u-subsection :list="list" :current="current" @change="change"></u-subsection></view></u-sticky>
			<view class="publish" v-if="current === 0">
				<u--form labelPosition="left" :model="data" ref="form1">
					<u-form-item label="名称" borderBottom ref="item1"><u--input v-model="data.name" border="none" placeholder="如: 前端开发工程师"></u--input></u-form-item>
					<u-form-item label="分类" borderBottom ref="item1" @click="selPost"><text>{{postName}}</text></u-form-item>
					<u-form-item label="薪资" borderBottom ref="item2"><u--input v-model="data.salary" border="none" placeholder="如: 6k-8k"></u--input></u-form-item>
					<u-form-item label="位置" borderBottom ref="item3">
						<u--input v-model="data.postinfo.location" border="none" placeholder="如: 上海市-徐汇区"></u--input>
					</u-form-item>
					<u-form-item label="身份" borderBottom ref="item3" @click="categoryShow = true">
						<text>{{ data.postinfo.category }}</text>
					</u-form-item>
					<u-form-item label="学历" borderBottom ref="item3" @click="educationShow = true">
						<text>{{ data.postinfo.education }}</text>
					</u-form-item>
					<view class="title"><text>公司信息</text></view>
					<u-form-item label="公司名称" borderBottom ref="item1"><u--input v-model="data.company.name" border="none" placeholder="公司全称"></u--input></u-form-item>
					<u-form-item label="公司类型" borderBottom ref="item1">
						<u--input v-model="data.company.category" border="none" placeholder="如: 网络传媒"></u--input>
					</u-form-item>
					<u-form-item label="规模" borderBottom ref="item3" @click="scaleShow = true">
						<text>{{ data.company.scale }}</text>
					</u-form-item>
					<u-form-item label="融资" borderBottom ref="item3" @click="financingShow = true">
						<text>{{ data.company.financing }}</text>
					</u-form-item>
					<u-form-item label="公司头像" borderBottom ref="item1" @click="selIcon"><image :src="data.company.icon">点击更换</image></u-form-item>
					<u-form-item label="简介" borderBottom ref="item3"><u--textarea maxlength="1000" placeholder="请填写岗位详情,如要求/福利等" v-model="data.description" count></u--textarea></u-form-item>
					<view class="title"><text>招聘人员信息</text></view>
					<u-form-item label="称呼" borderBottom ref="item1"><u--input v-model="data.recruitment.name" border="none"></u--input></u-form-item>
					<u-form-item label="公司简称" borderBottom ref="item1"><u--input v-model="data.recruitment.company" placeholder="如: XX软件" border="none"></u--input></u-form-item>
					<u-form-item label="头像" borderBottom ref="item1" @click="selHRIcon"><image :src="data.recruitment.icon">点击更换</image></u-form-item><u-form-item label="职务" borderBottom ref="item1"><u--input v-model="data.recruitment.position" placeholder="如: 人事" border="none"></u--input></u-form-item>
					<u-form-item label="标签" borderBottom ref="item1"><u--input v-model="titles" placeholder="输入职位关键词,以逗号分隔" border="none"></u--input></u-form-item>
				</u--form>
			</view>
			<u-picker :show="categoryShow" :columns="columns1" @confirm="confirm1" @cancel="categoryShow = false"></u-picker>
			<u-picker :show="educationShow" :columns="columns2" @confirm="confirm2" @cancel="educationShow = false"></u-picker>
			<u-picker :show="scaleShow" :columns="columns3" @confirm="confirm3" @cancel="scaleShow = false"></u-picker>
			<u-picker :show="financingShow" :columns="columns4" @confirm="confirm4" @cancel="financingShow = false"></u-picker>
			<view class="two" v-if="current === 1">
				<view class="jobCard">
					<view :key="index" v-for="(item, index) in postList" class="positionItem" @click="editJob(item)">
						<view class="positionContent">
							<view class="jobName">
								<text class="name">{{ item.name }}</text>
								<text class="salary">{{ item.salary }}</text>
							</view>
							<view class="jobCompany">
								<text>{{ item.recruitment.company }} {{ item.company.scale }} {{ item.company.financing }}</text>
							</view>
							<view class="jobLabel">
								<text :key="index" v-for="(item, index) in item.title" class="label">{{ item }}</text>
							</view>
							<view class="jobLocation">
								<text class="region">{{ item.postinfo.location }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="clearfix"></view>
		</view>
		<view class="footer" v-if="current === 0">
			<view class="btnContainer"><u-button class="btnUploadFile" size="normal" text="保存" :color="buttonBgColor" @click="saveInfo"></u-button></view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import navigationbar from '../navigationBar.vue';
export default {
	components: {
		navigationbar
	},
	onShow() {
		this.data.code = this.$store.state.publishCode.code
		this.postName = this.$store.state.publishCode.name
	},
	data() {
		return {
			offsetTop: '',
			buttonBgColor: '#7aaffe',
			list: ['发布岗位', '已发布'],
			title: '我的招聘',
			current: 0,
			categoryShow: false,
			educationShow: false,
			scaleShow:false,
			financingShow: false,
			columns1: [['应届', '往届', '往/应届']],
			columns2: [['初中', '高中/中专', '大专', '本科', '硕士', '博士']],
			columns3: [['0-99人','100-499人','500-999人','1000-9999人','10000以上']],
			columns4: [['未融资','A轮','B轮','C轮','D轮','已上市']],
			postName: '点击选择',
			titles: '',
			postList: '',
			data: {
				code: '',
				name: '',
				salary: '',
				postinfo: {
					location: '',
					category: '点击选择',
					education: '点击选择'
				},
				company: {
					name: '',
					category: '',
					icon: '',
					scale: '点击选择',
					financing: '点击选择'
				},
				description: '',
				recruitment: {
					name: '',
					position: '',
					company: '',
					icon: ''
				},
				title: [],
				recruitment_id: ''
			}
		};
	},
	onLoad() {
		this.setOffestTop()
	},
	methods: {
		change(index) {
			this.current = index;
			if(index === 1){
				this.getMyPostList()
			}
		},
		getMyPostList(){
			uniCloud.callFunction({
				name: 'getMyPostList',
				data: {
					id: this.$store.state.userID
				},
				success: (res) => {
					console.log(res)
					this.postList = res.result.data
				}
			})
		},
		editJob(_data) {
			this.current = 0
			this.data = _data
		},
		cancel() {},
		confirm1(data) {
			this.data.postinfo.category = data.value[0];
			this.categoryShow = false;
		},
		confirm2(data) {
			this.data.postinfo.education = data.value[0];
			this.educationShow = false;
		},
		confirm3(data) {
			this.data.company.scale = data.value[0]
			this.scaleShow = false
		},
		confirm4(data) {
			this.data.company.financing = data.value[0]
			this.financingShow = false
		},
		// 选择岗位分类
		selPost() {
			this.$store.commit('setIntentionKey', false)
			uni.navigateTo({
				url: '../user/intention/intention'
			})
		},
		saveInfo() {
			this.data.title = this.titles.split(/[,，]/g)
			this.data.recruitment_id = this.$store.state.userID
			console.log(this.data)
			uniCloud.callFunction({
				name: 'setPostList',
				data: this.data,
				success: (res) => {
					console.log(res.result.id)
					this.$refs.uToast.show({
						message: '岗位发布成功',
						icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						type: 'success'
					});
				}
			})
		},
		selIcon() {
			let that = this;
			uni.chooseImage({
				count: 1,
				async success(res) {
					let filePath = res.tempFilePaths[0];
					let cloudPath = 'a.jpg';
					let fileType = 'image';
					let result = await uniCloud.uploadFile({
						cloudPath,
						filePath,
						fileType
					});
					if(result.success){
						that.data.company.icon = result.fileID
						that.$refs.uToast.show({
							message: '头像选择成功',
							icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							type: 'success'
						});
					}else{
						that.$refs.uToast.show({
							message: '头像选择失败',
							icon: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
							type: 'error'
						});
					}
				}
			});
		},
		selHRIcon() {
			let that = this;
			uni.chooseImage({
				count: 1,
				async success(res) {
					let filePath = res.tempFilePaths[0];
					let cloudPath = 'a.jpg';
					let fileType = 'image';
					let result = await uniCloud.uploadFile({
						cloudPath,
						filePath,
						fileType
					});
					if(result.success){
						that.data.recruitment.icon = result.fileID
						that.$refs.uToast.show({
							message: '头像选择成功',
							icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							type: 'success'
						});
					}else{
						that.$refs.uToast.show({
							message: '头像选择失败',
							icon: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
							type: 'error'
						});
					}
				}
			});
		},
		// 获取吸顶距离
		setOffestTop() {
			let systemInfo = uni.getSystemInfoSync();
			let topPx = systemInfo.statusBarHeight + 44;
			this.offsetTop = topPx;
		},
	}
};
</script>

<style lang="scss">
$color: #dddddd;
.container {
	position: relative;
	width: 95%;
	margin: auto;
	.title {
		padding: 20rpx 0;
		font-size: 30rpx;
	}
	.top {
		width: 100%;
		margin-top: 40rpx;
		position: sticky;
		background-color: white;
	}
	.publish {
		height: 70%;
		overflow: hidden;
		width: 95%;
		margin: auto;
		margin-top: 50rpx;
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #e8efec;
			margin-right: 20rpx;
		}
	}
	.clearfix {
		height: 200rpx;
	}
	.jobCard {
		width: 100%;
		border-bottom: 1rpx solid transparent;
		background-color: #eeeeee;
	
		.positionItem {
			width: 100%;
			background-color: white;
			margin-bottom: 20rpx;
	
			.positionContent {
				width: 95%;
				height: 100%;
				margin: 0 auto;
				padding-top: 10rpx;
				font-size: 30rpx;
				.jobName,
				.jobCompany {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					padding: 5rpx 10rpx;
					margin: 10rpx 0;
					.name {
						font-size: 40rpx;
					}
					.salary {
						font-size: 35rpx;
						color: rgb(89, 120, 254);
					}
				}
				.jobLabel {
					margin: 20rpx 0;
					padding: 5rpx 10rpx;
					.label {
						font-size: 27rpx;
						background-color: rgb(236, 236, 236);
						margin-right: 10rpx;
						padding: 10rpx;
						border-radius: 15rpx;
					}
				}
				.jobLocation {
					.region {
						margin-bottom: 10rpx;
						float: right;
					}
				}
				.jobLocation:after {
					content: '';
					display: block;
					clear: both;
				}
			}
		}
	}
}
.footer {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	background-color: white;
	z-index: 9999;
	bottom: 0;
	.btnContainer {
		width: 90%;
		margin: 40rpx auto;
	}
}
.u-form-item {
	padding: 10rpx 0;
}
</style>
